.history-page {
  width: 100%;
  
  .history-card {
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    width: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      
      h4 {
        margin-bottom: 0;
      }
    }
    
    .filter-section {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 16px;
      
      .search-filters {
        display: flex;
        gap: 16px;
        
        @media (max-width: 768px) {
          flex-direction: column;
        }
      }
      
      .status-filters {
        display: flex;
        gap: 8px;
        
        @media (max-width: 576px) {
          flex-wrap: wrap;
          justify-content: flex-start;
        }
      }
    }
    
    .empty-container {
      padding: 48px 0;
      text-align: center;
      
      .ant-btn {
        margin-top: 16px;
      }
    }

    .ant-table-wrapper {
      .ant-table-thead > tr > th {
        background: #fafafa;
        font-weight: 600;
      }
      
      .success-row {
        background-color: rgba(246, 255, 237, 0.4);
        
        &:hover td {
          background-color: rgba(246, 255, 237, 0.8) !important;
        }
      }
      
      .failed-row {
        background-color: rgba(255, 242, 240, 0.4);
        
        &:hover td {
          background-color: rgba(255, 242, 240, 0.8) !important;
        }
      }
      
      .course-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        
        .course-name {
          font-weight: 500;
          font-size: 14px;
        }
        
        .course-id {
          color: #666;
          font-size: 12px;
        }
      }
      
      .task-info {
        .task-description {
          font-size: 12px;
          color: #666;
          margin-top: 4px;
        }
      }
      
      .status-tag {
        min-width: 80px;
        text-align: center;
        
        .anticon {
          margin-right: 4px;
        }
      }
    }
  }

  // 统计部分样式
  .statistics-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    
    .stat-item {
      flex: 1;
      min-width: 120px;
      background-color: #f5f5f5;
      padding: 16px;
      border-radius: 8px;
      text-align: center;
      
      .stat-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        margin-bottom: 8px;
      }
      
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }
      
      &.success {
        background-color: #f6ffed;
        
        .stat-value {
          color: #52c41a;
        }
      }
      
      &.failed {
        background-color: #fff2f0;
        
        .stat-value {
          color: #ff4d4f;
        }
      }
      
      &.missed {
        background-color: #fffbe6;
        
        .stat-value {
          color: #faad14;
        }
      }
      
      &.rate {
        background-color: #e6f7ff;
        
        .stat-value {
          color: #1890ff;
        }
      }
    }
  }

  // 表格行样式
  :global {
    .success-row {
      background-color: #f6ffed;
      
      &:hover > td {
        background-color: #d9f7be !important;
      }
    }
    
    .failed-row {
      background-color: #fff2f0;
      
      &:hover > td {
        background-color: #ffccc7 !important;
      }
    }
    
    .missed-row {
      background-color: #fffbe6;
      
      &:hover > td {
        background-color: #fff1b8 !important;
      }
    }
    
    .status-tag {
      min-width: 80px;
      text-align: center;
    }
  }

  // 记录详情样式
  .record-details {
    .status-header {
      margin-bottom: 16px;
      padding: 12px;
      background-color: #f5f5f5;
      border-radius: 6px;
      display: flex;
      align-items: center;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .history-page {
    .filter-section {
      .ant-space {
        flex-direction: column;
        width: 100%;
        
        .ant-space-item {
          margin-right: 0 !important;
          margin-bottom: 12px;
          width: 100%;
          
          .ant-input-affix-wrapper,
          .ant-picker {
            width: 100% !important;
          }
          
          .ant-btn {
            width: 100%;
          }
        }
      }
    }
  }
}

// 签到详情弹窗样式
.record-details {
  .status-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
  }
  
  .ant-descriptions {
    margin-top: 16px;
    
    &-item-label {
      width: 100px;
    }
  }
}